import {Checkbox, Col, Collapse, GetProp, Modal, Row} from "antd";
import React, { useState} from "react";

const apis={
	listRoleGroupsApi:'/role/list/groupByApp'
}

// @ts-ignore
export default function WorkSetRolesModal({open,onSetRolesOk,onCancel,work,roleGroups}){
	// @ts-ignore
	const [roleIds,setRoleIds] = useState(work.roles?.map(r => r.id));
	function getItems(roleGroups:any[]){
		return roleGroups.map(rg => {
			return {
				key: rg.appname,
				label: rg.appTitle,
				children:
					<Row key={rg.appname}>
					{rg.roles.map(
						// @ts-ignore
						r => {
						return <Col span={8}>
							<Checkbox value={r.id}>{r.name}</Checkbox>
						</Col>
					})}
				</Row>,
				showArrow: false,
			}
		})
	}
	function getActiveKeys(roleGroups:any[],roleIds:string[]){
		return roleGroups.filter(rg => {
			if(roleIds == null){
				return true;
			}
			// @ts-ignore
			const list = rg.roles.map(r => r.id);
			for (let item of list) {
				if (roleIds.includes(item)) {
					return true;
				}
			}
			return false;
		}).map(rg => rg.appname)
	}
	const checkBoxOnChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
		setRoleIds(checkedValues)
	};
	return(
		<Modal title={"分配角色"} okText={"确定"} cancelText={"取消"} okButtonProps={{ autoFocus: true }} destroyOnClose={true}
					 open={open} onCancel={onCancel} onOk={() => onSetRolesOk(roleIds)}>
			<Checkbox.Group style={{ width: '100%' }} onChange={checkBoxOnChange} value={roleIds}>
				<Collapse style={{width:1000}} items={getItems(roleGroups)} defaultActiveKey={getActiveKeys(roleGroups,roleIds)} key={"角色"} size={"small"}/>
			</Checkbox.Group>
		</Modal>
	);
}